<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="添加必点菜方案" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <custom-wd-input
        required
        custom-input-class="text-align-right"
        label="方案名称"
        placeholder="请输入方案名称"
        placeholder-class="text-align-right"
      />
      <custom-wd-input-single-select
        c-class="mt-3"
        required
        custom-input-class="text-align-right"
        label="方案使用渠道"
        title="请选择"
        placeholder="请选择"
        placeholder-class="text-align-right"
      />
      <custom-wd-input-single-select
        c-class="mt-3"
        required
        custom-input-class="text-align-right"
        label="必点类型"
        title="请选择"
        placeholder="请选择"
        placeholder-class="text-align-right"
      />
      <custom-wd-input-single-select
        c-class="mt-3"
        required
        custom-input-class="text-align-right"
        label="必点规则"
        title="请选择"
        placeholder="请选择"
        placeholder-class="text-align-right"
      />
      <view class="mt-3 overflow-hidden rounded-lg">
        <wd-cell center vertical custom-class="no-leading">
          <template #title>
            <view class="flex items-center justify-between">
              <wd-text text="必点菜品" size="14px" color="#333" />
              <view class="flex">
                <wd-text text="可选菜品" size="14px" color="#333" />
                <wd-icon name="chevron-down" size="20px" color="#bfbfbf" />
              </view>
            </view>
          </template>
          <template #label>
            <view class="mt-2">
              <wd-text
                text="如需设置餐具、茶位费、火锅底料等为必点，需先将起创建为菜品或套餐"
                size="12px"
              />
            </view>
          </template>
        </wd-cell>
        <view class="px-[10px]">
          <uv-line />
        </view>
        <wd-cell title="必点菜品排序" center>
          <view>
            <wd-button type="text">去排序</wd-button>
          </view>
        </wd-cell>
      </view>
      <custom-wd-input-single-select
        c-class="mt-3"
        required
        custom-input-class="text-align-right"
        label="生效时间"
        title="请选择"
        placeholder="请选择"
        placeholder-class="text-align-right"
      />
      <view class="mx-[10px] mt-6">
        <wd-text text="高级设置" bold size="16px" color="#333" />
      </view>
      <view class="mt-3 overflow-hidden rounded-lg">
        <wd-cell title="自动加入购物车">
          <wd-switch size="20px" />
        </wd-cell>
        <view class="px-[10px]">
          <uv-line />
        </view>
        <custom-wd-input-single-select
          class="!rounded-none"
          required
          custom-input-class="text-align-right"
          label="适用渠道"
          title="请选择"
          placeholder="请选择"
          placeholder-class="text-align-right"
        />
      </view>
      <view class="mt-3 overflow-hidden rounded-lg">
        <wd-cell
          title="顾客是否可以修改必点数量"
          label="顾客是否可以修改必点数量"
          title-width="70%"
          center
        >
          <wd-switch size="20px" />
        </wd-cell>
        <view class="px-[10px]">
          <uv-line />
        </view>
        <custom-wd-input-single-select
          class="!rounded-none"
          required
          custom-input-class="text-align-right"
          label="适用渠道"
          title="请选择"
          placeholder="请选择"
          placeholder-class="text-align-right"
        />
      </view>
      <wd-cell
        class="mt-3 rounded-lg"
        title="下单时检查必点菜品"
        label="开启后，没有必点菜品下单时提示或不能下单"
        title-width="70%"
        center
      >
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell
        class="mt-3 rounded-lg"
        title="结账时检查必点菜品"
        label="开启后，没有必点菜品下单时提示或不能结账"
        title-width="70%"
        center
      >
        <wd-switch size="20px" />
      </wd-cell>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button class="w-full" :round="false" type="primary">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.no-leading.wd-cell) {
  line-height: 18px;
}
</style>
